<html>
<body>
        <h1>My first SVG</h1>
        <style>
                svg{
                        position: absolute;
                        top: 100px;
                }
                
                line, path{
                stroke-opacity: 0.5;    
                stroke-width : 7;
                stroke-linecap: round;
                fill: none;
                stroke: green;
                }
                
                .over{
                        stroke: red;
                }
                
                .path2{
                        stroke-width: 55;
                        stroke: transparent;
                }
        </style>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" id='display' width='1280' height='900'></svg>
        <script type="text/javascript">
                var svg = 'http://www.w3.org/2000/svg';
                var line = document.createElementNS(svg,'line');
                document.getElementsByTagName('display').appendChild( line );
                
                line.setAttributeNS(null,'x1',5);
                line.setAttributeNS(null,'y1',5);

                line.setAttributeNS(null,'x2',100);
                line.setAttributeNS(null,'y2',100);
        
                var path = document.createElementNS(svg, 'path');
                path.setAttributeNS(null, 'd', 'M150 10 q 75 200 100 100');
                
                var path2 = document.createElementNS(svg, 'path');
                path2.setAttributeNS(null, 'd', 'M150 10 q 75 200 100 100');
                path2.setAttributeNS(null, 'class', 'path2');
                
                //var xlinkns = "http://www.w3.org/1999/xlink";
                //use1.setAttributeNS(xlinkns, "xlink:href", "#rect");
                
                
                path2.setAttributeNS(null, 'onmouseover', 'changeColor();');
                path2.setAttributeNS(null, 'onmouseout', 'revertColor();');
                document.getElementById('display').appendChild( path );
                document.getElementById('display').appendChild( path2 );
        
        
                function changeColor(){
                        path.setAttributeNS(null, 'class', 'over');
                }
                
                function revertColor(){
                        path.setAttributeNS(null, 'class', '');
                }
                
        </script>
</body>
</html>